<template>
  <div>
    <h3 ref="h3Ref">TemplateRefOne</h3>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'

export default {
  setup() {
    // 创建一个 DOM 引用 
    const h3Ref = ref()
    // 在 DOM 首次加载完毕之后，才能获取到元素的引用
    // !!!!!!切记获取引用时，一定要rentrn出去，不然无法只是setup内部的响应式数据而已
    onMounted(() => {
      console.log('%c 🍰 h3Ref11: ', 'font-size:20px;background-color: #E41A6A;color:#fff;', h3Ref.value)
    })

    // !!!!!!把创建的引用 return 出去
    return {
      h3Ref,
    }
  },
}
</script>
